<template>
    <div>
        <Nav></Nav>
<div class="container-fluid" style="margin-top: 100px;">
  <div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-6">
        <table class="text-center table table-bordered" align="center" width="100%">
          <tr  class="bg-light text-black-50">
            <th colspan="2" ><h3>添加会员</h3></th>
          </tr>
          <tr>
            <td style="width: 150px;">会员名：</td>
            <td><input class="form-control" placeholder="会员名" type="text" name="username"
                v-model="user.username"
                ></td>
          </tr>
          <tr>
            <td>年龄：</td>
            <td><input class="form-control" placeholder="年龄" type="number" name="age"
                v-model="user.age"
                ></td>
          </tr>
          <tr>
            <td>手机号：</td>
            <td><input class="form-control" placeholder="手机号" type="text" name="mobile"
                v-model="user.mobile"
                ></td>
          </tr>
          <tr>
            <td>个人邮箱：</td>
            <td><input class="form-control" placeholder="个人邮箱" type="text" name="email"
                v-model="user.email"
                ></td>
          </tr>
          <tr>
            <td>地址：</td>
            <td><input class="form-control" placeholder="地址" type="text" name="address"
                v-model="user.address"
                ></td>
          </tr>
          <tr>
              <td>图片：</td>
              <td>
                <img
                  :src="user.avatar"
                  class="img-fluid img-thumbnail"
                  alt=""
                  style="width: 100px; height: 40%; object-fit: cover"
                />
              </td>
            </tr>
            <tr>
              <td>会员图片：</td>
              <td>
                <el-upload
                  class="upload-demo"
                  action="/api/upload"
                  multiple
                  :on-preview="handlePreview"
                  :on-success="handleSuccess"
                >
                  <el-button type="primary">选择图片</el-button>
                </el-upload>
              </td>
            </tr>
          <tr>
            <td>个人描述：</td>
            <td><textarea class="form-control" rows="5" placeholder="个人描述..." name="description"
                v-model="user.description"
                ></textarea></td>
          </tr>
          <tr>
            <td><input class="btn btn-outline-warning" style="width: 100px" 
                @click="back()"
                 value="取消"></td>
            <td><input class="btn btn-success" style="width: 200px" type="submit" value="添加"
                @click="AddUser()"
                ></td>
            <td><input class="btn btn-outline-warning" type="reset" value="清空信息"></td>
          </tr>
        </table>
    </div>
    <div class="col-md-3"></div>
  </div>
</div>
    </div>
</template>

<script lang="ts" setup name="AddUser">
import Nav from "../Nav.vue";
import "../../assets/css/bootstrap.min.css";
import "../../assets/css/font-awesome.css";
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import {addVipUser } from "../../api/vipuser";
const router = useRouter();

const user = reactive({
  username: null,
  age: "",
  mobile: "",
  email: "",
  address: "",
  description: "",
  avatar: "",
});
const handlePreview: UploadProps["onPreview"] = (uploadFile) => {};
const handleSuccess: UploadProps["onSuccess"] = (value) => {
  if (value.code === 1) {
    ElMessage.success("图片上传成功")
    user.avatar = value.data;
  }
  if (value.code === 0) {
    ElMessage.error(value.msg);
  }
};
const AddUser = async () => {
  const res = await addVipUser(user);
  if (res.data.code === 1) {
    ElMessage.success("会员添加成功");
    setTimeout(() => {
        router.push("/userList");
        window.location.href = "/userList";
    }, 1000);
  }
  if (res.data.code === 0) {
    ElMessage.error(res.data.msg);
    router.push("/addUser");
  }
};
const back = () => {
  window.location.href = "/userList";
}
</script>

<style scoped>

</style>